<template>
    <div id="main" style="width: 1000px;height:2000px;"></div>

</template>
<script>
const echarts = require('echarts')

export default {
    data () {
        return {

        }
    },
  created() {
      // this.showEchats()
  },
  mounted() {
      this.showEchats()
  },
  methods: {
      showEchats() {
        const myChart = echarts.init(document.getElementById('main'));
        // const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
        const option = {
          tooltip: {
              trigger: 'axis'
          },
          xAxis: [{
              type: 'category',
              data: ['2019-01','2019-02','2019-03','2019-04','2019-05','2019-06'],
              axisLine: {
                  lineStyle: {
                      color: "#999"
                  }
              }
          }],
          yAxis: [{
              type: 'value',
              splitNumber: 4,
              splitLine: {
                  lineStyle: {
                      type: 'dashed',
                      color: '#DDD'
                  }
              },
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: "#333"
                  },
              },
              nameTextStyle: {
                  color: "#999"
              },
              splitArea: {
                  show: false
              }
          }],
          series: [
              {
                name: '课时',
                type: 'line',
                data: [23,60,20,36,23,85],
                lineStyle: {
                    normal: {
                        width: 8,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#A9F387' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#48D8BF' // 100% 处的颜色
                            }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                    }
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            borderWidth: 10,
                            /*shadowColor: 'rgba(72,216,191, 0.3)',
                            shadowBlur: 100,*/
                            borderColor: "#A9F387"
                        }
                    },
                    smooth: true
          },
              {
                name: '课时2',
                type: 'line',
                data: [100,120,130,140,20,41],
                lineStyle: {
                    normal: {
                        width: 8,
                        color: {
                            type: 'linear',

                            colorStops: [{
                                offset: 0,
                                color: '#A9F387' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#48D8BF' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                    shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#fff',
                        borderWidth: 10,
                        /*shadowColor: 'rgba(72,216,191, 0.3)',
                        shadowBlur: 100,*/
                        borderColor: "#A9F387"
                    }
                },
                smooth: true
          }
          ]
        };
        myChart.setOption(option);
      }
  }
}
</script>
